<template>
<div class="clickDeal">
  <div class="deal textAlignCenter">
    <button @click="ondealClick">处理</button>
  </div>
  <van-overlay :show="show" @click="show=false">
    <div class="wrapper">
      <div class="block textAlignCenter">
        <img src="@/assets/img/processing.png" alt="">
        <p>正在处理中</p>
      </div>
    </div>
  </van-overlay>

</div>
</template>

<script>
import Vue from 'vue';
import { Overlay } from 'vant';

Vue.use(Overlay);
export default {
  name: "clickDeal",
  data() {
    return {
      show: false
    }
  },
  methods:{
    ondealClick(){
      this.show=true
    },
  }
}
</script>

<style lang="less" scoped>
.deal{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: .2rem 0;
  background-color: #fff;
button{
  width: 9rem;
  font-size: .45rem;
  color: #fff;
  background-color: #409EFF;
  border: none;
  padding: .3rem 0;
  border-radius: .1rem;
}
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 8rem;
  height: 4rem;
  background-color: #fff;
  border-radius: .2rem;
  img{
    width: 1.5rem;
    height: 1.5rem;
    margin: .8rem auto .2rem auto;
  }
  p{
    font-size: .4rem;
  }
}
</style>